<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>


    <style>
        * {
            margin: 0;
            padding: 0;
            border: 1px solid red;
        }

        html,
        body {
            height: 100%;
        }
        .center{
            
        }
        .center .pro li{
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .center .pro {
            display: flex;
           
        }
        .center .pro .numGroup{
            display: flex;
          
        }
        .center .pro .numGroup .btn_min,.center .pro .numGroup .btn_add{
            width: 30px;
            text-align: center;
            cursor: pointer;
        }
        .footer{
            display: flex;
            justify-content: end;
            padding-right:20px ;
        }
    </style>
    <script src="../js/jquery.js"></script>
    <script>
        $(function () {

            $(".numGroup .btn_min").click(function(){
                //计算减少的功能
                let pronum = $(this).next().val();
                if(pronum > 0){
                    pronum --; 
                }
                $(this).next().val(pronum);
                //计算商品总价，单价*数量
                // debugger
                let singPrice = $(this).parent().parent().siblings(".prosinprice").text().trim().substring(1);
                console.log(typeof singPrice);
                singPrice = parseFloat(singPrice);
                let proNum = $(this).next().val();
                console.log(singPrice * proNum);
                let totalprice = singPrice * proNum;
                $(this).parent().parent().siblings(".totalprice").text("￥"+totalprice.toFixed(2));

                jisuanTotalPrice();

            })
            $(".numGroup .btn_add").click(function(){
                //计算增加的功能
                console.log();
                let pronum = $(this).prev().val();
                pronum  ++;
                $(this).prev().val(pronum);

                let singPrice = $(this).parent().parent().siblings(".prosinprice").text().trim().substring(1);
                singPrice = parseFloat(singPrice);
                let proNum = $(this).prev().val();
                let totalprice = singPrice * proNum;
                $(this).parent().parent().siblings(".totalprice").text("￥"+totalprice.toFixed(2));
                jisuanTotalPrice();
            })

            $(".pro .pro_num").change(function(){
                
                let proNum =  $(this).val();
                let singPrice = $(this).parent().parent().siblings(".prosinprice").text().trim().substring(1);
                singPrice = parseFloat(singPrice);
        
                let totalprice = singPrice * proNum;
                $(this).parent().parent().siblings(".totalprice").text("￥"+totalprice.toFixed(2));
                jisuanTotalPrice();
            })

            function jisuanTotalPrice(){
                let totalPrice = 0;
                $(".pro .totalprice").each(function(i,ele){
                    console.log(i );
                   
                    let price = $(ele).text();
                    
                    totalPrice += parseFloat($.trim(price).substring(1));
                    
                })
                console.log( );
                $(".pro_total_price").html("￥"+totalPrice.toFixed(2) )
            }
            //需要调用
            jisuanTotalPrice();
        })
    </script>
</head>

<body>
    <div class="con">
        <div class="header">

        </div>
        <div class="center">
            <ul class="pro">
                <li>
                    <img src="../img/快乐加倍.png" width="200px" height="200px" alt="">
                    <p>
                        这个是一个青少年图书,这个是一个青少年图书,这个是一个青少年图书
                    </p>
                </li>
                <li class="prosinprice">
                    ￥24.90
                </li>
                <li>
                    <div class="numGroup">
                        <div class="btn_min">
                            -
                        </div>
                        <input type="text" class="pro_num" name="" id="" value="3">
                        <div class="btn_add">
                            +
                        </div>
                    </div>
                </li>
                <li class="totalprice">
                    ￥24.90
                </li>
                <li>
                    <a href="#">移入收藏</a>
                    <a href="#">删除</a>
                    <a href="#">打开宝贝</a>
                </li>
            </ul>
            <ul class="pro">
                <li>
                    <img src="../img/快乐加倍.png" width="200px" height="200px" alt="">
                    <p>
                        这个是一个青少年图书,这个是一个青少年图书,这个是一个青少年图书
                    </p>
                </li>
                <li class="prosinprice">
                    ￥24.90
                </li>
                <li>
                    <div class="numGroup">
                        <div class="btn_min">
                            -
                        </div>
                        <input type="text" class="pro_num" name="" id="" value="3">
                        <div class="btn_add">
                            +
                        </div>
                    </div>
                </li>
                <li class="totalprice">
                    ￥24.90
                </li>
                <li>
                    <a href="#">移入收藏</a>
                    <a href="#">删除</a>
                    <a href="#">打开宝贝</a>
                </li>
            </ul>
            <ul class="pro">
                <li>
                    <img src="../img/快乐加倍.png" width="200px" height="200px" alt="">
                    <p>
                        这个是一个青少年图书,这个是一个青少年图书,这个是一个青少年图书
                    </p>
                </li>
                <li class="prosinprice">
                    ￥24.90
                </li>
                <li>
                    <div class="numGroup">
                        <div class="btn_min">
                            -
                        </div>
                        <input type="text" class="pro_num" name="" id="" value="3">
                        <div class="btn_add">
                            +
                        </div>
                    </div>
                </li>
                <li class="totalprice">
                    ￥24.90
                </li>
                <li>
                    <a href="#">移入收藏</a>
                    <a href="#">删除</a>
                    <a href="#">打开宝贝</a>
                </li>
            </ul>

        </div>
        <div class="footer">
            总金额：<span class="pro_total_price">￥0</span>
        </div>
    </div>
</body>

</html>